<template>
  <view class="container">
    <!-- 圆形图片选择区域 -->
    <image 
      :src="imageUrl" 
      mode="aspectFill" 
      class="round-image" 
      @click="chooseImage"
    ></image>

    <!-- 功能按钮组 -->
    <view class="btn-group">
      <button 
        @click="previewImage" 
        class="custom-btn preview-btn"
      >
        预览图片
      </button>
    </view>

    <!-- 天气预报区域 -->
    <view class="section">
      <button 
        @click="getWeather" 
        class="custom-btn weather-btn"
      >
        获取明天天气预报
      </button>
      <view class="weather-card" v-if="weatherInfo">
        <view class="weather-item">日期：{{ weatherInfo.ymd }}</view>
        <view class="weather-item">星期：{{ weatherInfo.week }}</view>
        <view class="weather-item">最高温：{{ weatherInfo.high.replace('高温 ', '') }}°C</view>
        <view class="weather-item">最低温：{{ weatherInfo.low.replace('低温 ', '') }}°C</view>
        <view class="weather-item">天气：{{ weatherInfo.type }}</view>
        <view class="weather-item">提示：{{ weatherInfo.notice }}</view>
      </view>
    </view>

    <!-- 网络图片下载区域 -->
    <view class="section">
      <button 
        @click="downloadNetworkImage" 
        class="custom-btn download-btn"
      >
        下载网络图片
      </button>
      <image 
        :src="networkImageUrl" 
        mode="widthFix" 
        class="preview-image" 
        v-if="networkImageUrl"
      ></image>
      <view class="progress-tip" v-if="downloadProgress > 0 && downloadProgress < 100">
        下载进度：{{ downloadProgress }}%
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',          // 本地选择的图片路径
      weatherInfo: null,     // 天气预报数据
      networkImageUrl: '',   // 下载的网络图片路径
      downloadProgress: 0    // 下载进度（0-100）
    };
  },
  methods: {
    // 选择本地图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0];
        },
        fail: () => {
          uni.showToast({ title: '图片选择失败', icon: 'none' });
        }
      });
    },

    // 预览已选择的图片
    previewImage() {
      if (!this.imageUrl) {
        uni.showToast({ title: '请先选择图片', icon: 'none' });
        return;
      }

      uni.previewImage({
        current: this.imageUrl,
        urls: [this.imageUrl],
        fail: () => {
          uni.showToast({ title: '图片预览失败', icon: 'none' });
        }
      });
    },

    // 获取天气预报（明天数据）
    getWeather() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
            // 取预报数组的第2项（第1项是今天）
            this.weatherInfo = res.data.data.forecast[1];
          } else {
            uni.showToast({ title: '获取天气失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('天气接口请求失败：', err);
          uni.showToast({ title: '网络异常，获取失败', icon: 'none' });
        }
      });
    },

    // 下载网络图片（带进度监听）
    downloadNetworkImage() {
      this.downloadProgress = 0;
      const downloadTask = uni.downloadFile({
        url: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg',
        success: (res) => {
          if (res.statusCode === 200) {
            this.downloadProgress = 100;
            this.networkImageUrl = res.tempFilePath;
            uni.showToast({ title: '图片下载完成', icon: 'success' });
            // 3秒后清除进度提示
            setTimeout(() => { this.downloadProgress = 0; }, 3000);
          }
        },
        fail: (err) => {
          console.error('图片下载失败：', err);
          this.downloadProgress = 0;
          uni.showToast({ title: '图片下载失败', icon: 'none' });
        }
      });

      // 监听下载进度
      downloadTask.onProgressUpdate((res) => {
        this.downloadProgress = res.progress;
        console.log(`下载进度：${res.progress}%`);
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 圆形图片样式 */
.round-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  border: 2rpx solid #eee;
  background-color: #fff;
  overflow: hidden;
}

/* 按钮组样式 */
.btn-group {
  margin-top: 60rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 通用按钮样式 */
.custom-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  color: #fff;
  font-size: 32rpx;
}

/* 按钮差异化样式 */
.preview-btn { background-color: #34c759; }
.weather-btn { background-color: #007aff; }
.download-btn { background-color: #3CD6FF; }

/* 区域通用样式 */
.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 20rpx;
}

/* 天气预报卡片 */
.weather-card {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.weather-item {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}
.weather-item:last-child { margin-bottom: 0; }

/* 下载图片预览 */
.preview-image {
  width: 500rpx;
  height: 300rpx;
  border-radius: 16rpx;
  border: 1rpx solid #eee;
  overflow: hidden;
}

/* 下载进度提示 */
.progress-tip {
  font-size: 24rpx;
  color: #666;
  text-align: center;
  margin-top: 10rpx;
}
</style>